import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Switch,
  Alert,
} from 'react-native';
import { useAppSelector, useAppDispatch } from '../../store';
import { setTheme, setNotifications, setLanguage } from '../../store/slices/appSlice';
import { useTheme } from '../../contexts/ThemeContext';

const SettingsScreen: React.FC = () => {
  const dispatch = useAppDispatch();
  const { theme, notifications, language } = useAppSelector((state) => state.app);
  const { colors } = useTheme();

  const handleThemeChange = (newTheme: 'light' | 'dark' | 'system') => {
    dispatch(setTheme(newTheme));
  };

  const handleNotificationChange = (value: boolean) => {
    dispatch(setNotifications(value));
  };

  const handleLanguageChange = (newLanguage: string) => {
    dispatch(setLanguage(newLanguage));
  };

  const settingsSections = [
    {
      title: '外观',
      items: [
        {
          title: '主题',
          subtitle: '选择应用主题',
          type: 'theme' as const,
          value: theme,
          options: [
            { label: '浅色', value: 'light' },
            { label: '深色', value: 'dark' },
            { label: '跟随系统', value: 'system' },
          ],
        },
      ],
    },
    {
      title: '通知',
      items: [
        {
          title: '推送通知',
          subtitle: '接收应用推送通知',
          type: 'switch' as const,
          value: notifications,
          onValueChange: handleNotificationChange,
        },
      ],
    },
    {
      title: '语言',
      items: [
        {
          title: '应用语言',
          subtitle: '选择应用显示语言',
          type: 'language' as const,
          value: language,
          options: [
            { label: '简体中文', value: 'zh-CN' },
            { label: 'English', value: 'en-US' },
          ],
        },
      ],
    },
    {
      title: '其他',
      items: [
        {
          title: '清除缓存',
          subtitle: '清除应用缓存数据',
          type: 'action' as const,
          onPress: () => Alert.alert('清除缓存', '缓存已清除'),
        },
        {
          title: '关于应用',
          subtitle: '版本 1.0.0',
          type: 'action' as const,
          onPress: () => Alert.alert('关于应用', 'React Native 模板应用\n版本 1.0.0'),
        },
      ],
    },
  ];

  const renderSettingItem = (item: any) => {
    switch (item.type) {
      case 'switch':
        return (
          <Switch
            value={item.value}
            onValueChange={item.onValueChange}
            trackColor={{ false: colors.border, true: colors.primary }}
            thumbColor={colors.background}
          />
        );
      case 'theme':
      case 'language':
        return (
          <TouchableOpacity
            onPress={() => {
              const options = item.options.map((opt: any) => ({
                text: opt.label,
                onPress: () => {
                  if (item.type === 'theme') {
                    handleThemeChange(opt.value);
                  } else if (item.type === 'language') {
                    handleLanguageChange(opt.value);
                  }
                },
              }));
              Alert.alert(item.title, '请选择', options);
            }}
          >
            <Text style={[styles.settingValue, { color: colors.primary }]}>
              {item.options.find((opt: any) => opt.value === item.value)?.label || item.value}
            </Text>
          </TouchableOpacity>
        );
      case 'action':
        return (
          <TouchableOpacity onPress={item.onPress}>
            <Text style={[styles.settingValue, { color: colors.primary }]}>
              ›
            </Text>
          </TouchableOpacity>
        );
      default:
        return null;
    }
  };

  return (
    <ScrollView 
      style={[styles.container, { backgroundColor: colors.background }]}
      contentContainerStyle={styles.content}
    >
      {settingsSections.map((section, sectionIndex) => (
        <View key={sectionIndex} style={styles.section}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>
            {section.title}
          </Text>
          
          {section.items.map((item, itemIndex) => (
            <View
              key={itemIndex}
              style={[styles.settingItem, { backgroundColor: colors.surface }]}
            >
              <View style={styles.settingContent}>
                <Text style={[styles.settingTitle, { color: colors.text }]}>
                  {item.title}
                </Text>
                <Text style={[styles.settingSubtitle, { color: colors.textSecondary }]}>
                  {item.subtitle}
                </Text>
              </View>
              {renderSettingItem(item)}
            </View>
          ))}
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    padding: 20,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 12,
    marginLeft: 4,
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 8,
    marginBottom: 8,
  },
  settingContent: {
    flex: 1,
  },
  settingTitle: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 4,
  },
  settingSubtitle: {
    fontSize: 14,
  },
  settingValue: {
    fontSize: 16,
    fontWeight: '500',
  },
});

export default SettingsScreen; 